<template>
	<view>
		<view class="top u-flex">
			<view class="search-box u-flex" @click="goToSearch(queryName)">
				<view class="keyword u-flex" v-if="queryName != ''">
					<text>{{ queryName }}</text>
					<!-- <image src="../../../../static/icon/close_white.png" @click.stop="goToSearch()"></image> -->
				</view>
			</view>
			<!-- <image class="toggle-icon"
				:src="display == 'card' ? '../../../../static/icon/arrange_list_black.png' : '../../../../static/icon/arrange_cell_black.png'"
				@click="toggleDisplay"></image> -->
		</view>
		<view class="sort u-flex">
			<view class="item synthesize">
				<view @click="sortPop = true" class="u-flex"
					:style="{ color: sortBy == 0 || sortBy == 8 ? '#BF1111' : '#333' }">
					<text>{{ sortBy == 0 ? '综合' : '销量' }}</text>
					<u-icon name="down" custom-prefix="custom-icon"></u-icon>
				</view>
				<u-popup v-model="sortPop" mode="top" border-radius="16" length="auto">
					<view class="sort-rule u-flex-col">
						<view class="u-flex" :style="{ color: sortBy == 0 ? '#BF1111' : '#333' }"
							@click="sort(0), (sortPop = false)">
							<text>综合排序</text>
							<u-icon v-if="sortBy == 0" name="checkbox-mark"></u-icon>
						</view>
						<view class="u-flex" :style="{ color: sortBy == 8 ? '#BF1111' : '#333' }"
							@click="sort(8), (sortPop = false)">
							<text>销量排序</text>
							<u-icon v-if="sortBy == 8" name="checkbox-mark"></u-icon>
						</view>
					</view>
				</u-popup>
			</view>
			<view class="item" @click="sort(7)" :style="{ color: sortBy == 7 ? '#BF1111' : '#333' }">新品</view>
			<view class="item price" @click="sort(3)"
				:style="{ color: sortBy == 1 || sortBy == 2 ? '#BF1111' : '#333' }">
				<text>价格</text>
				<u-icon name="down" custom-prefix="custom-icon"
					:style="{ transform: sortBy == 1 ? 'rotate(180deg)' : '' }"></u-icon>
			</view>
			<view class="item" @click="sort(6)" :style="{ color: sortBy == 6 ? '#BF1111' : '#333' }">信用</view>
			<view class="item">
				<view class="u-flex" @click="filterPop = true" :style="{ color: filterColor }">
					<text>筛选</text>
					<u-icon name="filter" custom-prefix="custom-icon" size="30"></u-icon>
				</view>
				<u-popup v-model="filterPop" mode="right" length="80%">
					<scroll-view scroll-y class="filter">
						<view class="params" v-if="screeningInfo.services">
							<view class="head u-flex">
								<view class="title">折扣与服务</view>
								<!-- <view class="all u-flex">
									<text>全部</text><u-icon name="down" custom-prefix="custom-icon"></u-icon>
								</view> -->
							</view>
							<view class="list u-flex">
								<text :class="{ active: isActive(item, 'services') }"
									v-for="(item, index) in screeningInfo.services" :key="index"
									@click="paramsFilter(item, 'services')">
									{{ item.name }}
								</text>
							</view>
						</view>
						<view class="params">
							<view class="head u-flex">
								<view class="title">价格区间</view>
							</view>
							<view class="price-box u-flex">
								<input type="text" placeholder="最低价" v-model.number="filter.minPrice"
									@blur="getGoodsList" />
								<text>-</text>
								<input type="text" placeholder="最高价" v-model.number="filter.maxPrice"
									@blur="getGoodsList" />
							</view>
						</view>
						<view class="params" v-if="screeningInfo.category2">
							<view class="head u-flex">
								<view class="title">分类</view>
							</view>
							<view class="list u-flex">
								<text :class="{ active: isActive(item, 'category2') }"
									v-for="(item, index) in screeningInfo.category2" :key="index"
									@click="paramsFilter(item, 'category2')">
									{{ item.name }}
								</text>
							</view>
						</view>
						<view class="params" v-if="screeningInfo.brands">
							<view class="head u-flex">
								<view class="title">品牌</view>
								<!-- <view class="all u-flex">
									<text>全部</text><u-icon name="down" custom-prefix="custom-icon"></u-icon>
	 							</view> -->
							</view>
							<view class="list u-flex">
								<text :class="{ active: isActive(item, 'brands') }"
									v-for="(item, index) in screeningInfo.brands" :key="index"
									@click="paramsFilter(item, 'brands')">
									{{ item.name }}
								</text>
							</view>
						</view>
						<view class="params" v-for="(item, index) in screeningInfo.attr" :key="index">
							<view class="head u-flex">
								<view class="title">{{ item.name }}</view>
								<!-- <view class="all u-flex">
									<text>全部</text><u-icon name="down" custom-prefix="custom-icon"></u-icon>
								</view> -->
							</view>
							<view class="list u-flex">
								<text :class="{ active: sitem.selected }" v-for="(sitem, sindex) in item.attrValue"
									:key="sindex" @click="attrFilter(item, sitem)">
									{{ sitem.name }}
								</text>
							</view>
						</view>
					</scroll-view>
					<view class="btns u-flex">
						<view class="btn reset u-flex" @click="resetFilter">重置</view>
						<view class="btn confirm u-flex" @click="filterPop = false">确定({{ total }}件商品)</view>
					</view>
				</u-popup>
			</view>
		</view>

		<!-- 卡片视图 -->
		<view class="goodslist-card" v-show="display == 'card'">
			<view class="item" v-for="(item, index) in goodsList" :key="index"
				@click="goToDetail(item.data.goodsInfo.gid)">
				<view class="goods-img u-flex">
					<u-lazy-load :image="item.data.goodsInfo.img800s || item.data.goodsInfo.imgSquare"
						loading-img="/static/lazy/goods-lazy-load.png"></u-lazy-load>
				</view>
				<view class="labelbox">
					<text v-for="(litem, lindex) in item.data.label.normal" :key="lindex"
						:style="{ backgroundColor: getLabelColor(litem.attrs) }">{{ litem.text }}</text>
				</view>
				<view class="title">{{ item.data.goodsInfo.name }}</view>
				<view class="subtitle">
					<text
						v-if="!item.data.goodsInfo.coreSellingPoint || item.data.goodsInfo.coreSellingPoint.length == 0">{{ item.data.goodsInfo.summary }}</text>
					<view v-else class="selling-point">
						<text v-for="(sitem, sindex) in item.data.goodsInfo.coreSellingPoint"
							:key="sindex">{{ sitem }}</text>
					</view>
				</view>
				<view class="price">
					<text>￥</text>
					<text class="priceMin">{{ item.data.goodsInfo.priceMin / 100 }}</text>
					<text class="spec" v-if="item.data.goodsInfo.priceTag">起</text>
					<text class="marketPrice"
						v-if="item.data.goodsInfo.priceMin != item.data.goodsInfo.marketPrice">￥{{ item.data.goodsInfo.marketPrice / 100 }}</text>
				</view>
				<view class="comment">
					<text>{{ item.data.comment.count > 100000 ? '10万+' : item.data.comment.count }}条评论</text>
					<text v-if="item.data.comment.positiveRate > 0">{{ item.data.comment.positiveRate }}%好评</text>
				</view>
			</view>
		</view>
		<!-- 列表视图 -->
		<view class="goodslist-list" v-show="display == 'list'">
			<view class="item u-flex" v-for="(item, index) in goodsList" :key="index"
				@click="goToDetail(item.data.goodsInfo.gid)">
				<u-lazy-load class="goods-img" border-radius="12"
					:image="item.data.goodsInfo.img800s || item.data.goodsInfo.imgSquare"
					loading-img="/static/lazy/goods-lazy-load.png"></u-lazy-load>
				<view class="content u-flex-col">
					<view class="title u-line-1">{{ item.data.goodsInfo.name }}</view>
					<view class="subtitle u-line-1">{{ item.data.goodsInfo.summary }}</view>
					<view class="selling-point" v-if="item.data.goodsInfo.coreSellingPoint">
						<text v-for="(sitem, sindex) in item.data.goodsInfo.coreSellingPoint"
							:key="sindex">{{ sitem }}</text>
					</view>
					<view class="price">
						<text>￥</text>
						<text class="priceMin">{{ item.data.goodsInfo.priceMin / 100 }}</text>
						<text class="spec" v-if="item.data.goodsInfo.priceTag">起</text>
						<text class="marketPrice"
							v-if="item.data.goodsInfo.priceMin != item.data.goodsInfo.marketPrice">￥{{ item.data.goodsInfo.marketPrice / 100 }}</text>
					</view>
					<view class="labelbox">
						<text v-for="(litem, lindex) in item.data.label.normal" :key="lindex"
							:style="{ backgroundColor: getLabelColor(litem.attrs) }">{{ litem.text }}</text>
					</view>
					<view class="comment">
						<text>{{ item.data.comment.count > 100000 ? '10万+' : item.data.comment.count }}条评论</text>
						<text v-if="item.data.comment.positiveRate > 0">{{ item.data.comment.positiveRate }}%好评</text>
					</view>
				</view>
			</view>
		</view>
		<view class="sortLoading" v-show="sortLoading"><full-loading></full-loading></view>
		<view v-show="showLoadmore">
			<u-loadmore :status="loadingStatus" :margin-top="20" :margin-bottom="40" bg-color="#f9f9f9" :font-size="24"
				:load-text="loadingText" color="#999" />
		</view>
	</view>
</template>

<script>
	import fullLoading from '@/components/full-loading.vue'
	export default {
		data() {
			return {
				queryName: '',
				queryID: '',
				goodsList: [],
				sortBy: 0,
				pageIdx: 0,
				total: 0,
				screeningInfo: {},
				screeningInfoCount: 0,
				filter: {
					attr: [],
					brands: [],
					category1: [],
					category2: [],
					category3: [],
					maxPrice: null,
					minPrice: null,
					services: [],
					special: [],
					specialCoupon: [],
					tags: []
				},
				loadingStatus: 'loadmore',
				loadingText: {
					loadmore: '上拉加载更多',
					loading: '努力加载中~',
					nomore: '我也是有底线的'
				},
				sortLoading: true,
				sortPop: false,
				filterPop: false,
				display: 'card',
				filterColor: '#333',
				pageType: ''
			}
		},
		onLoad(e) {
			if (e.cid) {
				this.pageType = 'categoryTab'
				this.queryID = e.cid
			} else if (e.key) {
				this.pageType = 'searchPage'
				this.queryName = e.key
			}
			this.getGoodsList()
		},
		methods: {
			getGoodsList(type) {
				// 0 综合排序  8 销量排序  7 新品排序  1 价格低到高  2 价格高到低  6 信用排序
				// 筛选改变filter对象
				let data = {
					queryId: this.queryID,
					query: [{
						queryName: this.queryName,
						queryType: 0,
						rule: []
					}],
					sortBy: this.sortBy,
					pageIdx: 0,
					filter: this.filter,
					source: this.pageType
				}
				let api = ''
				if (this.pageType == 'categoryTab') {
					api = 'queryIdSearch'
				} else if (this.pageType == 'searchPage') {
					api = 'doSearch'
				}
				// this.$u.api[api](data).then(res => {
				// 	if (type != 'more') {
				// 		this.goodsList = res.data.data.goods
				// 		this.pageIdx = res.data.pageIdx
				// 		this.total = res.data.total
				// 		if (res.data.screeningInfo && this.screeningInfoCount == 0) {
				// 			this.screeningInfo = res.data.screeningInfo
				// 			this.screeningInfoCount++
				// 		}
				// 		if (this.total == 0) {
				// 			this.showToast('暂无匹配商品，请重新选择', 'warning')
				// 		}
				// 		this.sortLoading = false
				// 	} else {
				// 		res.data.data.goods.forEach(x => {
				// 			this.goodsList.push(x)
				// 		})
				// 		this.loadingStatus = 'loadmore'
				// 		this.pageIdx = res.data.pageIdx
				// 	}

				// })
			},
			sort(id) {
				// 当点击筛选ID和目前列表的筛选ID一致时，不请求数据，节省流量
				if (id == this.sortBy) return
				switch (id) {
					case 3:
						switch (this.sortBy) {
							case 1:
								this.sortBy = 2
								console.log('降序排列')
								break
							case 2:
								this.sortBy = 1
								console.log('升序排列')
								break
							default:
								this.sortBy = 2
								console.log('降序排列')
						}
						break
					default:
						this.sortBy = id
				}
				this.goodsList = []
				this.pageIdx = 0
				this.sortLoading = true
				this.getGoodsList()
			},
			paramsFilter(item, type) {
				if (this.filter[type].indexOf(item.name) == -1) {
					this.filter[type].push(item.name)
				} else {
					this.filter[type].splice(this.filter[type].indexOf(item.name), 1)
				}
				this.filterColor = '#BF1111'
				this.getGoodsList()
			},
			attrFilter(item, sitem) {
				let result = []
				item.attrValue.some((x, i) => {
					if (x.name == sitem.name) {
						if (!x.selected) {
							this.$set(x, 'selected', true)
						} else {
							x.selected = false
						}
					}
					if (x.selected) {
						result.push(x)
					} else {
						result.splice(i, 1)
					}
				})
				// console.log(result)
				let str = []
				result.forEach(x => {
					str.push(x.name)
				})
				// console.log(str)
				let obj = {
					name: item.name,
					attrValue: []
				}
				// console.log(obj)
				let flag = true
				this.filter.attr.forEach(item => {
					if (item.name === obj.name) {
						// 对象里的唯一标识name
						flag = false
					}
				})
				if (flag) {
					this.filter.attr.push(obj)
				}
				this.filter.attr.forEach((x, i) => {
					if (x.name == item.name) {
						x.attrValue = str
					}
					if (x.attrValue.length == 0) {
						this.filter.attr.splice(i, 1)
					}
				})

				this.filterColor = '#BF1111'
				this.getGoodsList()
			},
			resetFilter() {
				// 初始化filter对象
				Object.assign(this.$data.filter, this.$options.data().filter)
				this.screeningInfo.attr.forEach(x => {
					x.attrValue.forEach(s => {
						s.selected = false
					})
				})
				this.filterColor = '#333'
				this.getGoodsList()
			},
			isActive(item, type) {
				if (this.filter[type].indexOf(item.name) == -1) {
					return false
				} else {
					return true
				}
			},
			getLabelColor(str) {
				return str.substr(str.indexOf('#'), 7)
			},
			goToDetail(gid) {
				uni.navigateTo({
					url: '../detail/detail?gid=' + gid
				})
			},
			goToSearch(key) {
				if (key) {
					uni.redirectTo({
						url: '../../search/search?key=' + key
					})
				} else {
					uni.redirectTo({
						url: '../../search/search'
					})
				}
			},
			toggleDisplay() {
				if (this.display == 'card') {
					this.display = 'list'
				} else {
					this.display = 'card'
				}
			},
			showToast(msg, type) {
				this.$refs.miToast.show({
					title: msg,
					type: type
				})
			}
		},
		onReachBottom() {
			if (this.pageIdx < this.total) {
				this.getGoodsList('more')
				this.loadingStatus = 'loading'
			} else {
				this.loadingStatus = 'nomore'
			}
		},
		computed: {
			showLoadmore() {
				return this.goodsList.length !== 0 ? true : false
			}
		},
		components: {
			fullLoading
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.top,
	.sort {
		position: fixed;
		width: 750rpx;
		font-size: 26rpx;
		background-color: #f7f7f7;
		z-index: 1080;
		// transform: rotate(180deg);
	}

	.top {
		top: 0;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 60rpx;

		.search-box {
			flex: 1;
			padding-left: 18rpx;
			// width: 660rpx;
			height: 60rpx;
			background-color: #ffffff;
			border-radius: 30rpx;

			.keyword {
				padding: 2rpx 16rpx;
				color: #fff;
				border-radius: 30rpx;
				background-color: rgb(153, 153, 153);

				image {
					// margin-left: 6rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.toggle-icon {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.sort {
		top: 60rpx;
		height: 80rpx;
		color: #333333;

		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20%;
			height: inherit;

			&>view {
				width: 100%;
				height: inherit;
				justify-content: center;
			}

			u-icon {
				margin-left: 4rpx;
			}

			.u-drawer {
				// top: 60rpx;
			}

			.sort-rule {
				justify-content: space-around;
				padding: 10rpx 24rpx;
				height: 160rpx;
				background-color: #f7f7f7;

				&>view {
					justify-content: space-between;
					// margin-top: 20rpx;
				}
			}

			.filter {
				height: 92%;

				// padding: 10rpx 0;
				.params {
					margin-bottom: 20rpx;
					padding: 0 20rpx;

					.head {
						justify-content: space-between;
						height: 60rpx;
						font-size: 28rpx;
						color: #555;

						.title {
							font-weight: bold;
						}

						.all {
							color: #999;
							font-size: 22rpx;
						}
					}

					.list {
						// justify-content: space-between;
						flex-wrap: wrap;
						margin-top: 10rpx;

						text {
							margin: 0 16rpx 20rpx 0;
							padding: 0 10rpx;
							height: 52rpx;
							width: 176rpx;
							max-width: 176rpx;
							font-size: 24rpx;
							line-height: 51rpx;
							text-align: center;
							border-radius: 26rpx;
							background-color: rgb(244, 244, 244);
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							border: 1rpx solid rgb(244, 244, 244);
						}

						text:nth-child(3n) {
							margin-right: 0;
						}

						.active {
							color: #bf1111;
							border: 1rpx solid rgb(191, 17, 17);
							background-color: rgb(246, 237, 237);
						}
					}

					.price-box {
						justify-content: space-between;
						margin-top: 10rpx;

						input {
							height: 52rpx;
							width: 240rpx;
							margin-bottom: 20rpx;
							text-align: center;
							border-radius: 26rpx;
							background-color: rgb(244, 244, 244);
						}

						text {
							margin-bottom: 20rpx;
						}
					}
				}
			}

			.btns {
				justify-content: space-around;
				height: 8%;

				// background-color: #EEEEEE;
				.btn {
					justify-content: center;
					height: 80%;
					width: 46%;
					border-radius: 60rpx;
				}

				.reset {
					color: rgb(51, 51, 51);
					border: 1rpx solid rgb(204, 204, 204);
				}

				.confirm {
					color: #fff;
					background: linear-gradient(to right, rgb(240, 78, 46), rgb(213, 16, 16));
				}
			}
		}

		.synthesize {}

		.price {}
	}

	.goodslist-card {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 20rpx;
		margin-top: 140rpx;
		background-color: #f7f7f7;

		.item {
			position: relative;
			width: 346rpx;
			margin-bottom: 24rpx;
			padding-bottom: 20rpx;
			border-radius: 8rpx;
			background-color: #ffffff;
			font-size: 28rpx;
			overflow: hidden;

			.goods-img {
				justify-content: center;
				width: 346rpx;
				height: 346rpx;
				border-radius: 8rpx 8rpx 0 0;

				u-lazy-load {
					width: 280rpx;
					height: 280rpx;

					.u-wrap {
						background-color: #fff !important;
					}
				}
			}

			.labelbox {
				position: absolute;
				top: 308rpx;
				left: 0;

				text {
					display: inline-block;
					border-radius: 2rpx;
					// background-color: #d96b6c;
					color: #ffffff;
					margin-right: 10rpx;
					text-align: center;
					height: 32rpx;
					padding: 0 10rpx;
					line-height: 32rpx;
					font-size: 24rpx;
				}
			}

			.title,
			.subtitle {
				width: 346rpx;
				padding-left: 16rpx;
				padding-right: 6rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				-webkit-box-pack: center;
				overflow: hidden;
			}

			.title {
				font-size: 30rpx;
				color: rgb(51, 51, 51);
				line-height: 42rpx;
				margin-top: 6rpx;
			}

			.subtitle {
				font-size: 26rpx;
				color: rgb(153, 153, 153);
				margin-top: 4rpx;
				line-height: 36rpx;

				.selling-point {
					text {
						font-size: 22rpx;
						display: inline-block;
						margin-right: 8rpx;
						padding: 0 12rpx;
						border-radius: 36rpx;
						background-color: rgb(248, 248, 248);
					}
				}
			}

			.price {
				margin-top: 10rpx;
				padding-left: 16rpx;
				color: rgb(227, 13, 13);
				font-size: 26rpx;
				height: 40rpx;
				font-family: 'AllAndNone';

				.priceMin {
					font-size: 34rpx;
					margin-right: 4rpx;
					font-weight: bold;
				}

				.marketPrice {
					margin-left: 6rpx;
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}

				.spec {
					font-size: 24rpx;
				}
			}

			.comment {
				margin-top: 6rpx;
				padding-left: 16rpx;
				font-size: 22rpx;
				color: #999;

				text {
					margin-right: 12rpx;
				}
			}
		}
	}

	.goodslist-list {
		padding: 0 20rpx;
		margin-top: 140rpx;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		overflow: hidden;

		.item {
			margin: 30rpx 0;
			font-size: 28rpx;

			.goods-img {
				width: 252rpx;
				height: 252rpx;

				.u-wrap {
					background-color: rgba(0, 0, 0, 0.02) !important;
				}
			}

			.content {
				height: 252rpx;
				padding: 4rpx 0 2rpx 16rpx;
			}

			.title,
			.subtitle {
				width: 440rpx;
			}

			.title {
				font-size: 28rpx;
				color: #333;
				line-height: 42rpx;
			}

			.subtitle {
				font-size: 24rpx;
				color: rgb(153, 153, 153);
				margin-top: 4rpx;
				line-height: 36rpx;
			}

			.selling-point {
				text {
					display: inline-block;
					margin-right: 8rpx;
					padding: 0 12rpx;
					font-size: 22rpx;
					color: #999;
					border-radius: 36rpx;
					background-color: rgb(248, 248, 248);
				}
			}

			.price {
				margin-top: auto;
				color: rgb(227, 13, 13);
				font-size: 26rpx;
				height: 40rpx;
				font-family: 'AllAndNone';

				.priceMin {
					font-size: 34rpx;
					margin-right: 4rpx;
					font-weight: bold;
				}

				.marketPrice {
					margin-left: 6rpx;
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}

				.spec {
					font-size: 24rpx;
				}
			}

			.labelbox {
				text {
					display: inline-block;
					border-radius: 4rpx;
					color: #ffffff;
					margin-right: 10rpx;
					text-align: center;
					height: 32rpx;
					padding: 0 10rpx;
					line-height: 32rpx;
					font-size: 24rpx;
				}
			}

			.comment {
				margin-top: 6rpx;
				font-size: 22rpx;
				color: #999;

				text {
					margin-right: 12rpx;
				}
			}
		}
	}

	.changeTabLoading {
		position: relative;
		width: 750rpx;
		height: 1000rpx;
	}

	full-loading {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>